<template>
    <div class="areaChart" ref="areaChart">

    </div>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useECharts } from '@/components/echarts/useECharts';
let areaChart = ref<HTMLDivElement | null>();
const initAreaChart = (datas: Array<{ name: string, value: number }>) => {
    let { setOptions, getInstance } = useECharts(areaChart as Ref<HTMLDivElement>, true);
    let data = datas;
    for (var n in data) {
        data[n]['name'] = data[n]['name'];
    }
    let options = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}',
            backgroundColor: '#001764',
            textStyle: {
                color: '#fff',
            },
        },
        color: [
            {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                    {
                        offset: 0,
                        color: '#0060e7', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#427ee5', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                    {
                        offset: 0,
                        color: '#00b0ca', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#75c6d9', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                    {
                        offset: 0,
                        color: '#ba9800', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#c3b583', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                    {
                        offset: 0,
                        color: '#db5c28', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#d88165', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                    {
                        offset: 0,
                        color: '#6c24e8', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#8c5be5', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
        ],
        // visualMap: {
        //     show: true,
        //     min: 0,
        //     max: 31 * 10,
        //     calculable: true,
        //     seriesIndex: [1],
        //     orient: 'horizontal',
        //     left: 'center',
        //     bottom: 20,
        //     inRange: {
        //         color: ['#e0ffff', '#006edd'],
        //         opacity: 1
        //     },
        //     controller: {
        //         inRange: {
        //             opacity: 1
        //         }
        //     }
        // },
        series: [
            {
                type: 'treemap',
                width: '100%',
                height: '100%',
                top: '0',
                roam: false, //是否开启拖拽漫游（移动和缩放）
                nodeClick: false, //点击节点后的行为,false无反应
                breadcrumb: {
                    show: false,
                },
                squareRatio: 1,  //必加
                label: {
                    //描述了每个矩形中，文本标签的样式。
                    normal: {
                        show: true,
                        position: ['0%', '0%'],
                        formatter: (param: any) => {
                            return `{a|${param.value}}\n{b|${param.name}}`;
                        },
                        rich: {
                            a: {
                                color: 'red',
                            },
                            b: {
                                color: 'gold',
                            }
                        },
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        borderWidth: 2,
                        // borderColor: '#031661',
                        borderColor: '#03166100',
                        borderRadius: 3,
                    },
                    emphasis: {
                        label: {
                            show: true,
                        },
                    },
                },
                data: data,
            },
        ],
    };
    setOptions(options);
}
onMounted(() => {
    let data = [
        {
            name: '1',
            value: 1,
        },
        {
            name: '2',
            value: 1,
        },
        {
            name: '3',
            value: 1,
        },
        {
            name: '4',
            value: 1,
        },
        {
            name: '5',
            value: 1,
        },
        {
            name: '6',
            value: 1,
        },
        {
            name: '7',
            value: 1,
        },
        {
            name: '8',
            value: 1,
        },
        {
            name: '9',
            value: 1,
        },
        {
            name: '10',
            value: 1,
        },
        {
            name: '11',
            value: 1,
        },
        {
            name: '12',
            value: 1,
        },
    ]
    initAreaChart(data);
})
</script>

<style lang="less" scoped>
.areaChart {
    width: 600px;
    height: 400px;
}
</style>